<template>
  <router-link :to="`/detail?id=${id}`" tag="div" :event="type === 1 ? 'click' : ''">
    <dl class="cate-item">
        <dt class="cate-item-img">
          <img :src="image" alt="">
        </dt>
        <dd v-if="type === 1">
          <p class="cate-item-title">
            {{title}}
          </p>
          <p class="cate-item-intro">
            <span>￥<b>{{price}}</b></span>
            <span>销量<i>{{saleNum}}</i></span>
          </p>
        </dd>
      </dl>
  </router-link>
</template>

<script>
export default {
  name: 'CartItem',
  props: ['id', 'title', 'image', 'price', 'saleNum', 'type'],
  methods: {
    goCart () {
      console.log('cart')
    }
  }
}
</script>

<style lang="scss" scoped>
 .cate-item{
      background-color:white;
      &-img{
        width: 100%;
        img{
          width: 100%;
        }
      }
      &-title{
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow:hidden;
        color: #6666;
        line-height: 24px;
      }
      &-intro{
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        line-height: 48px;
        b{
          color: red;
        }
        i{
          font-style: normal;
        }
      }
     }
     dd{
         display: flex;
         flex-direction: column;
         justify-content: center;
     }
</style>
